<template>
  <el-dialog
    v-model="props.dialogVisible"
    title="查看"
    :width="800"
    :close-on-click-modal="false"
    :before-close="handcancel"
    :footer="null"
  >
    <iframe
      v-if="accept === 'pdf'"
      class="preview-pdf"
      :src="props.url + '#view=Fit&navpanes=0'"
      width="100%"
      height="600"
    ></iframe>

    <div
      v-if="
        accept === 'doc' ||
        accept === 'docx' ||
        accept === 'xlsx' ||
        accept === 'ppt'
      "
    >
      <iframe
        :src="props.url"
        frameborder="0"
        width="100%"
        height="600"
      ></iframe>
    </div>
    <div
      v-else-if="
        accept === 'jpg' ||
        accept === 'gif' ||
        accept === 'jpeg' ||
        accept === 'bmp' ||
        accept === 'png'
      "
      style="max-height: 600px; overflow: auto"
    >
      <img :src="props.url" style="max-width;: 100%" alt="" />
    </div>
  </el-dialog>
</template>
<script setup lang="ts">
const props = defineProps({
  dialogVisible: {
    typeof: Boolean,
    default: false,
  },
  url: {
    typeof: String,
    default: '',
  },
  title: {
    typeof: String,
    default: '',
  },
})
const emit = defineEmits(['update:dialogVisible'])
const accept = computed(() => {
  const list = props.url.split('.')
  return list[list.length - 1]
})
const handcancel = () => {
  emit('update:dialogVisible', false)
}
</script>
<style lang="scss" scoped></style>
